<template>
  <div class="journal-management">
    <!-- 搜索区域 -->
    <el-card class="search-box">
      <el-form :model="searchForm" inline>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="searchForm.nickname" placeholder="请输入昵称" clearable />
        </el-form-item>
        <el-form-item label="模块名称">
          <el-input v-model="searchForm.module" placeholder="请输入模块名称" clearable />
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker v-model="timeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleDateChange" />
        </el-form-item>
        <el-form-item label="功能名称">
          <el-input v-model="searchForm.functionName" placeholder="请输入模块名称" clearable />
        </el-form-item>
        <el-form-item label="ip地址">
          <el-input v-model="searchForm.ip" placeholder="请输入ip地址" clearable />
        </el-form-item>
        <!-- 添加重置按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <!-- 日志表格 -->
    <el-card class="mt-20">
      <el-table :data="journalList" v-loading="loading" style="width: 100%" :fit="true">
        <el-table-column prop="module" label="模块名称" min-width="120" />
        <el-table-column prop="functionName" label="功能名称" min-width="120" />
        <el-table-column prop="phone" label="手机号" min-width="100" />
        <el-table-column prop="nickname" label="昵称" min-width="120" />
        <el-table-column prop="ip" label="ip地址" min-width="120" />
        <el-table-column prop="createTime" label="创建时间" min-width="130" />
        <el-table-column prop="description" label="描述和结果" min-width="120" />
        <!-- 添加分页 -->
        <template #append>
          <div class="pagination-container">
            <el-pagination v-model:current-page="searchForm.pageNum" v-model:page-size="searchForm.pageSize"
              :total="total" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange" @current-change="handlePageChange" />
          </div>
        </template>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getJournalList } from '../api/journal'
import type { JournalList, JournalListParams } from '../api/journal'
import dayjs from 'dayjs'

// 搜索表单
const searchForm = reactive<JournalListParams>({
  phone: '',
  nickname: '',
  module: '',
  functionName: '',
  ip: '',
  startTime: '',
  endTime: '',
  pageNum: 1,
  pageSize: 10
})

// 时间范围选择器
const timeRange = ref<string[]>([])

// 表格数据
const journalList = ref<JournalList[]>([])
const loading = ref(false)
const total = ref(0)

// 获取日志列表
const fetchJournalList = async () => {
  const response = await getJournalList(searchForm)
  journalList.value = response.data.list.map((item: JournalList) => ({
    ...item,
    createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
  }))
  console.log(response.data.list)
  total.value = response.data.total
}

// 搜索操作
const handleSearch = () => {
  searchForm.pageNum = 1
  fetchJournalList()
}

// 重置搜索
const handleReset = () => {
  timeRange.value = []
  Object.assign(searchForm, {
    phone: '',
    nickname: '',
    module: '',
    functionName: '',
    ip: '',
    startTime: '',
    endTime: '',
    pageNum: 1,
    pageSize: 10
  })
  fetchJournalList()
}

// 处理时间选择
const handleDateChange = (dates: [string, string] | null) => {
  if (dates && dates.length === 2) {
    searchForm.startTime = dates[0]
    searchForm.endTime = dates[1]
  } else {
    searchForm.startTime = ''
    searchForm.endTime = ''
  }
}

// 分页操作
const handleSizeChange = (val: number) => {
  searchForm.pageSize = val
  fetchJournalList()
}

const handlePageChange = (val: number) => {
  searchForm.pageNum = val
  fetchJournalList()
}

// 初始化加载
onMounted(() => {
  fetchJournalList()
})
</script>

<style scoped>
.search-box {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
</style>